<template>
	<view style="background-color: #F4F3F3;height: 100vh;position: relative;">
		<u-navbar :safeAreaInsetTop="true" :bgColor="theme_color" :leftIconColor="theme_color">
			<view slot="center">
				<view style="text-align: center;letter-spacing: 2px;font-weight: bolder;color: white;">个人中心</view>
			</view>
		</u-navbar>
		<view style="height: 100px;padding: 20px;"
			:style="'margin-top:' + navH + 'px;background-color: '+theme_color+';'">
			<view class="acea-row row-between">
				<view class="acea-row">
					<u-avatar :src="userInfo.headimg" size="50"></u-avatar>
					<view style="margin-left: 10px;" class="acea-row row-middle">
						<view v-if="!isLogin" @click="goLogin()" style="color: white;">登录</view>
						<view v-else style="color: white;" class="fs-16">
							{{userInfo.user_name}}
						</view>
						<view v-if="userInfo.dianpu_id > 0" class="acea-row row-middle">
							<u-image :src="img_url + '/statics/yilangmp/sanbaowulian/vip.png'" width="70px"
								mode="aspectFit" height="30px"></u-image>
							<view style="margin-left: 10px;color: white;" v-if="userInfo.rank_id > 0" class="fs-12">
								{{userInfo.rank_name}}
							</view>
						</view>
					</view>
				</view>
				<view class="acea-row" style="padding-top: 10px;">
					<view>
						<navigator url="/pages/users/user_info/index" hover-class="none">
							<u-icon name="setting" color="white" size="20"></u-icon>
						</navigator>
					</view>
					<view style="margin-left: 15px;">
						<navigator url="/pages/users/message_center/index" hover-class="none">
							<u-icon name="bell" color="white" size="20"></u-icon>
						</navigator>
					</view>
				</view>
			</view>
		</view>
		<view style="margin: -50px 10px 0;border-radius: 8px;z-index: 99;"
			class="bg-white acea-row row-around padding10">
			<view @click="toUrl('/pages/users/user_wallet/index')">
				<view class="fw-bolder color000" style="text-align: center;">{{walletInfo.user_money || 0}}</view>
				<view class="color000 fs-12" style="text-align: center;padding-top: 10px;">
					总金额
				</view>
			</view>
			<!-- <view>
				<view class="fw-bolder color000" style="text-align: center;"></view>
				<view class="color000 fs-12" style="text-align: center;padding-top: 10px;">
					优惠券
				</view>
			</view> -->
			<view @click="toUrl('/pages/users/user_integral/index')">
				<view class="fw-bolder color000" style="text-align: center;">{{walletInfo.pay_points || 0}}</view>
				<view class="color000 fs-12" style="text-align: center;padding-top: 10px;">
					积分
				</view>
			</view>
			<view @click="toUrl('/pages/users/user_collection/index')">
				<view class="fw-bolder color000" style="text-align: center;">{{collectInfo.goods_collect || 0}}</view>
				<view class="color000 fs-12" style="text-align: center;padding-top: 10px;">
					收藏
				</view>
			</view>
			<!-- <view>
				<view class="fw-bolder color000" style="text-align: center;">{{}}</view>
				<view class="color000 fs-12" style="text-align: center;padding-top: 10px;">
					浏览记录
				</view>
			</view> -->
		</view>

		<view>
			<view style="margin: 10px;border-radius: 8px;padding: 15px 10px;" class="bg-white">
				<navigator url="/pages/order/order_list/index/index" class="acea-row row-between row-middle">
					<view class="fw-bolder color000 fs-14">
						订单中心
					</view>
					<view class="color999 fs-12">
						查看全部 >
					</view>
				</navigator>

				<view class="acea-row row-around" style="margin-top: 10px;">
					<view class="acea-row row-column row-middle order" @click="toOrder(1)">
						<u-image :src="img_url + '/statics/yilangmp/sanbaowulian/wait.png'" width="30px"
							height="30px"></u-image>
						<view class="color000 fs-12" style="text-align: center;padding-top: 10px;">
							待付款
						</view>
						<view class="tag" v-if="tagInfo.wait_pay >0">
							<view>{{tagInfo.wait_pay}}</view>
						</view>
					</view>
					<view class="acea-row row-column row-middle order" @click="toOrder(2)">
						<u-image :src="img_url + '/statics/yilangmp/sanbaowulian/send.png'" width="30px"
							height="30px"></u-image>
						<view class="color000 fs-12" style="text-align: center;padding-top: 10px;">
							待发货
						</view>
						<view class="tag" v-if="tagInfo.wait_send >0">
							<view>{{tagInfo.wait_send}}</view>
						</view>
					</view>
					<view class="acea-row row-column row-middle order" @click="toOrder(3)">
						<u-image :src="img_url + '/statics/yilangmp/sanbaowulian/receive.png'" width="30px"
							height="30px"></u-image>
						<view class="color000 fs-12" style="text-align: center;padding-top: 10px;">
							待收货
						</view>
						<view class="tag" v-if="tagInfo.wait_recieve >0">
							<view>{{tagInfo.wait_recieve}}</view>
						</view>
					</view>
					<!-- 	<view class="acea-row row-column row-middle">
						<u-image :src="img_url + '/statics/yilangmp/sanbaowulian/comment.png'" width="30px"
							height="30px"></u-image>
						<view class="color000 fs-12" style="text-align: center;padding-top: 10px;">
							待评价
						</view>
					</view> -->
					<view class="acea-row row-column row-middle order" @click="toOrder(4)">
						<u-image :src="img_url + '/statics/yilangmp/sanbaowulian/after.png'" width="30px"
							height="30px"></u-image>
						<view class="color000 fs-12" style="text-align: center;padding-top: 10px;">
							售后/退款
						</view>
						<view class="tag" v-if="tagInfo.finished >0">
							<view>{{tagInfo.finished}}</view>
						</view>
					</view>
				</view>
			</view>
			<view style="margin: 10px 10px 30px 10px;border-radius: 8px;padding: 15px 10px;" class="bg-white">
				<view class="fw-bolder color000 fs-14">
					我的服务
				</view>
				<view style="margin-top: 10px;">
					<u-grid :border="false" col="4">
						<u-grid-item v-for="(item,index) in MyMenus" :key="index">
							<view class="acea-row row-column row-middle" @click="goMenuPage(item.url, item.name,index)"
								style="margin-bottom: 20px;">
								<u-image :src="item.pic" width="30px" height="30px"></u-image>
								<view style="padding-top: 10px;" class="color000 fs-12">{{item.name}}</view>
							</view>
						</u-grid-item>
						<u-grid-item>
							<navigator class="acea-row row-column row-middle" style="margin-bottom: 20px;">
								<button open-type="contact" class="button">
									<u-image :src="img_url + '/statics/yilangmp/sanbaowulian/service.png'" width="30px"
										height="30px"></u-image>
									<view class="color000 fs-12" style="padding-top: 10px;">联系客服</view>
								</button>
							</navigator>
						</u-grid-item>
					</u-grid>
				</view>
			</view>


		</view>
		<view style="text-align: center;bottom: 20px;position: absolute;left: 0;right: 0;" class="color999 fs-12">
			广西一浪科技有限公司 提供技术支持
		</view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from "@/config/app";
	import {
		toLogin
	} from "@/libs/login";
	import {
		mapGetters
	} from "vuex";
	import {
		userInfo,
		wallet,
		sum_collect,
		unread_total
	} from '@/api/user';
	import {
		order_total
	} from '@/api/store.js'
	const common = require('@/mixins/common');
	var options = {};
	common(options);
	export default {
		mixins: [{
			methods: options
		}],
		computed: mapGetters(["isLogin", "app_token"]),
		data() {
			return {
				img_url: BASE_URL,
				navH: '',
				theme_color: getApp().globalData.theme_color,
				message_num: 0,
				userInfo: {
					user_name: '',
					headimg: '',
					is_sign: 0,
					dianpu_id: 0
				},
				walletInfo: {},
				collectInfo: {},
				MyMenus: [
					// {
					// 	"name": "分销会员",
					// 	"pic": BASE_URL + "/statics/yilangmp/sanbaowulian/member.png",
					// 	"url": "/pages/users/personal/index"
					// },
					{
						"name": "礼品赠送",
						"pic": BASE_URL + "/statics/yilangmp/sanbaowulian/gift.png",
						// "url": "/pages/users/user_gift/index"
						"url": "/pages/users/user_integral/integral_shop/index"
					},
					{
						"name": "浏览记录",
						"pic": BASE_URL + "/statics/yilangmp/sanbaowulian/collection.png",
						"url": "/pages/users/visit_list/index"
					},
					{
						"name": "地址信息",
						"pic": BASE_URL + "/statics/yilangmp/sanbaowulian/address.png",
						"url": "/pages/users/user_address_list/index"
					},

					{
						"name": "我的钱包",
						"pic": BASE_URL + "/statics/yilangmp/sanbaowulian/yue.png",
						"url": "/pages/users/user_wallet/index"
					},
					// {
					// 	"name": "邀请记录",
					// 	"pic": BASE_URL + "/statics/yilangmp/sanbaowulian/log.png",
					// 	"url": "/pages/users/user_referer/index"
					// },
					{
						"name": "商家入驻",
						"pic": BASE_URL + "/statics/yilangmp/sanbaowulian/apply.png",
						"url": "/pages/settled/index"
					},
					{
						"name": "积分商城",
						"pic": BASE_URL + "/statics/system_images/menu_spread.png",
						"url": "/pages/users/user_integral/index"
					},
					// {
					// 	"name": "购物车",
					// 	"pic": BASE_URL + "/statics/yilangmp/sanbaowulian/cart.png",
					// 	"url": "/pages/cart/index"
					// }
				],
				tagInfo: {
					wait_pay: 0,
					wait_send: 0,
					wait_recieve: 0,
					finished: 0
				}
			}
		},
		onShow() {
			let self = this
			if (!this.isLogin) {
				// toLogin()
			} else {
				self.getUserInfo();
				self.getWallet();
				self.getCollect();
				self.getOrderTagData()
			}
		},
		onLoad() {
			this.navH = getApp().globalData.navHeight / 2 - 5;

		},
		methods: {
			getOrderTagData() {
				order_total({
					app_token: this.app_token,
					supplier_id: getApp().globalData.supplier_id
				}).then(res => {
					this.tagInfo = res.data
				})
			},

			goLogin() {
				toLogin()
			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			toOrder(index) {
				uni.navigateTo({
					url: '/pages/order/order_list/index/index?current=' + index
				})
			},
			getUserInfo() {
				let that = this;
				userInfo({
					app_token: that.app_token,
					supplier_id: getApp().globalData.supplier_id
				}).then(res => {
					that.userInfo = res.data
					that.$store.commit("UPDATE_USERINFO", res.data);
				});
			},
			getWallet() {
				let that = this;
				wallet({
					app_token: that.app_token,
					supplier_id: getApp().globalData.supplier_id
				}).then(res => {
					that.walletInfo = res.data
				})
			},
			getCollect() {
				let that = this;
				sum_collect({
					app_token: that.app_token,
					supplier_id: getApp().globalData.supplier_id
				}).then(res => {
					that.collectInfo = res.data
				})
			},
			goMenuPage(url, name, index) {
				if (this.isLogin) {
					// if (index == 0) {
					// 	return uni.navigateTo({
					// 		url: '/pages/webview/webview'
					// 	})
					// }
					if (url.indexOf('http') === -1) {
						// #ifdef MP
						if (name && name === '联系客服') {
							return getCustomer(url)
						}
						if (url != '#' && url == '/pages/users/user_info/index') {
							uni.openSetting({
								success: function(res) {}
							});
						}
						// #endif
						uni.navigateTo({
							url: url,
							fail(err) {
								uni.switchTab({
									url: url
								})
							}
						})
					} else {
						uni.navigateTo({
							url: `/pages/annex/web_view/index?url=${url}`
						});
					}
				} else {
					// #ifdef MP
					toLogin();
					// #endif
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.button {
		background: none !important;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		line-height: 1 !important;
	}

	.button::after {
		border: none !important;
	}

	.order {
		position: relative;

		.tag {
			position: absolute;
			top: -5px;
			right: 0;
			color: white;
			font-size: 10px;
			background-color: orangered;
			border-radius: 100%;
			width: 20px;
			height: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>